<template>
  <header class="header">
    <div class="container">
      <div class="header-content">
        <!-- Logo -->
        <router-link to="/" class="logo">
          <img v-if="appStore.storeInfo.logo" :src="appStore.storeInfo.logo" alt="Lucy African Fashion" />
          <span v-else class="logo-text">
            <n-icon size="32" color="var(--color-primary)">
              <StorefrontOutline />
            </n-icon>
            Lucy African Fashion
          </span>
        </router-link>

        <!-- Desktop Navigation -->
        <nav class="nav-desktop">
          <router-link to="/" class="nav-link">Home</router-link>
          <router-link to="/products" class="nav-link">Products</router-link>
          <router-link to="/about" class="nav-link">About Us</router-link>
          <router-link to="/contact" class="nav-link">Contact</router-link>
        </nav>

        <!-- Mobile Menu Toggle -->
        <button class="mobile-menu-btn" @click="mobileMenuOpen = !mobileMenuOpen">
          <n-icon size="28">
            <MenuOutline v-if="!mobileMenuOpen" />
            <CloseOutline v-else />
          </n-icon>
        </button>
      </div>

      <!-- Mobile Navigation -->
      <transition name="slide-down">
        <nav v-show="mobileMenuOpen" class="nav-mobile">
          <router-link to="/" class="nav-link" @click="mobileMenuOpen = false">Home</router-link>
          <router-link to="/products" class="nav-link" @click="mobileMenuOpen = false">Products</router-link>
          <router-link to="/about" class="nav-link" @click="mobileMenuOpen = false">About Us</router-link>
          <router-link to="/contact" class="nav-link" @click="mobileMenuOpen = false">Contact</router-link>
        </nav>
      </transition>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import { NIcon } from 'naive-ui'
import { StorefrontOutline, MenuOutline, CloseOutline } from '@vicons/ionicons5'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
const mobileMenuOpen = ref(false)
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
  transition: var(--transition-base);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  
  img {
    height: 50px;
    width: auto;
  }
  
  .logo-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

.nav-desktop {
  display: flex;
  gap: 2rem;
  
  .nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.5rem 0;
    position: relative;
    transition: var(--transition-fast);
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
      transition: var(--transition-base);
    }
    
    &:hover,
    &.router-link-active {
      color: var(--color-primary);
      
      &::after {
        width: 100%;
      }
    }
  }
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text-primary);
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-gray-light);
  
  .nav-link {
    padding: 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
    
    &:hover,
    &.router-link-active {
      color: var(--color-primary);
      background-color: var(--color-gray-light);
      border-left-color: var(--color-primary);
    }
  }
}

// Mobile Styles
@media (max-width: 768px) {
  .nav-desktop {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .nav-mobile {
    display: flex;
  }
}

// Transitions
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
  max-height: 300px;
}

.slide-down-enter-from,
.slide-down-leave-to {
  max-height: 0;
  opacity: 0;
}
</style>

